<template>
  <div class="big-bg">
    <div class="big-screen" ref="appRef">
      <div class="__top">
        <pageTitle :menu="routeData"></pageTitle>
      </div>
      <router-view />
    </div>
  </div>
</template>

<script>
  import drawMixin from '@/utils/drawMixin'
  import pageTitle from './components/pageTitle'
  import util from '@/utils/util'
  let mixin = new drawMixin()
  export default {
    name: "Index",
    components: { pageTitle },
    mixins: [mixin],
    data() {
      return {
        routeData: [],
        loading: true
      }
    },
    watch: {
      $route(route) {
         //console.log('----route:', route)
      }
    },
    mounted() {
      const { routes } = this.$router.options
      const { children } = util.find(routes, e=>e.redirect !== '')
      this.routeData = util.filter(children, e=>!e.hidden)
    },
    methods: {
      nodeClick(data){
        let Link = this.$router.resolve({
          path: data.path
        })
        window.open(Link.href, '_blank')
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            // location.href = './index'
            console.log('成功退出')
            window.location.reload()
          })
        }).catch(() => {
        });
      }
    },
  }
</script>

<style scoped lang="scss">
  .big-screen {
    background-image: url('~@/assets/img/bg.svg');
    display: grid;
    grid-template-rows: 110px auto;
  }
  .bigScreen {
    padding: 15px;
    .row-bg { border-bottom: 1px #DCDFE6 solid; padding-bottom: 15px;}

    .tree_box {
      margin-top: 15px;
      ::v-deep .el-tree-node {
        border-bottom: 1px dashed #ddd;
        &+.el-tree-node { /*border-top: 1px dashed #ddd;*/ }
        .el-tree-node__children {
          border-top: 1px dashed #ddd;
          .el-tree-node:last-child {border: 0}
        }
      }
      ::v-deep .el-tree-node__content {
        height: 40px!important;
      }
      .tree_node {
        width: 100%; padding-right: 10px; display: flex; align-items: center; justify-content: space-between;
      }

    }
  }
</style>

